import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image, Text } from '@tarojs/components'
import { AtIcon, AtTabs, AtTabsPane } from 'taro-ui'
import './detail.scss'
import { connect } from '@tarojs/redux'
import { State, Props } from './detail.interface'
import { Youhui } from './plug/youhui'
import { Service } from './plug/service'
import { Sku } from './plug/sku'
import { Param } from './plug/param'
import { Store } from './plug/store'

@connect(({ detail }) => ({
  ...detail,
}))

class Detail extends Component<State, Props>  {
  constructor(props: Props) {
    super(props);
    this.state = {
      current: 0,
      isFringe: 0
    }
  }
  componentWillMount() {
  }

  async componentDidMount() {
    let goodsId = this.$router.params.id;
    const { dispatch } = this.props;
    await dispatch({
      type: 'detail/getDetail',
      payload: {
        id: goodsId
      }
    })
  }

  componentWillUnmount() { }

  // onShareAppMessage(){
  //     return {
  //       // title:this.state.name,
  //       // path: '/pages/goods/detail?id='+ this.state.id,
  //       // success:function(res){
  //       //   console.log(res);
  //       // }
  //     }
  // }

  handleChangeTab(value) {
    this.setState({
      current: value
    });
  }

  handleGoBack() {
    Taro.navigateBack();
  }

  handleRedirectIndex() {
    Taro.navigateTo({
      url: '/pages/index/index'
    });
  }

  render() {
    const tabList = [{ title: '商品详情' }, { title: '商品评价' }]
    const { data } = this.props;
    return (
      <View className='detail-box'>
        {
          this.state.isFringe
            ?
            <View className='chevron-left detail-fringe' onClick={this.handleGoBack}>
              <View className='bg-c'>
                <AtIcon value='chevron-left' size='28' color='#fff'></AtIcon>
              </View>
            </View>
            :
            <View className='chevron-left detail-no-fringe' onClick={this.handleGoBack}>
              <View className='bg-c'>
                <AtIcon value='chevron-left' size='28' color='#fff'></AtIcon>
              </View>
            </View>
        }

        <Swiper
          className='detail-swiper'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay>
          {
            data.images.map(function (item) {
              return <SwiperItem>
                <Image className='detail-swiper-image' src={item.image} mode='widthFix' />
              </SwiperItem>
            })
          }
        </Swiper>
        {/* 预约 */}
        {/* <View className='detail-active'>
              <View className='detail-active-time'>
                <View>距离活动结束</View>
                <View className='detail-active-time-value'>
                  <View>1</View>天
                  <View>15</View>时
                  <View>15</View>分
                  <View>15</View>秒
                </View>
              </View>
          </View> */}

        <View className='detail-info'>
          <View className='detail-info-sale'>
            <View className='detail-price'>
              <View className='detail-info-sale-price'>
                <Text>￥</Text>
                <Text className='detail-info-sale-price-value'>{data.selling_price}</Text>
              </View>
              <View className='detail-price-tag'>夏不为利</View>
            </View>
            <View className='detail-info-sale-old-price'>
              <Text>价格</Text>
              <View className='detail-info-sale-old-price-value'>￥{data.original_price}</View>
            </View>
          </View>
          <View className='detail-info-name'>
            <Text className='name'>{data.name}</Text>
            <View className='detail-info-share'>
              <AtIcon value='share' size='16' color='#717171'></AtIcon>
              <Text>分享</Text>
            </View>
          </View>
          <View className='detail-info-other'>
            <View>快递: 0.0</View>
            <View>月销416</View>
            <View>浙江绍兴</View>
          </View>
        </View>
        <View className='divider'></View>
        {/* 优惠 */}
        <Youhui />
        {/* 服务 */}
        <Service />
        <View className='divider'></View>
        {/* 规格 */}
        <Sku />
        {/* 参数 */}
        <Param />
        <View className='divider'></View>
        {/* 店铺 */}
        <Store />
        <View className='divider'></View>
        <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleChangeTab.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
            <View className='illustrate'>
              <div dangerouslySetInnerHTML={{ __html: data.detail }}></div>
              {/* {
                  this.state.illustrate.map(function(item){
                    return <Image className='detail-swiper-image' src={item} mode='widthFix' />
                  })
                } */}
            </View>
            <View className='detail-bottom-empty'></View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View></View>
          </AtTabsPane>
        </AtTabs>

        <View className='detail-bottom'>
          <View className='detail-bottom-item' onClick={this.handleRedirectIndex}>
            <AtIcon prefixClass='icon' value='dianpu' size='16' color='#7C7C7C'></AtIcon>
            <View>首页</View>
          </View>
          <View className='detail-bottom-item'>
            <AtIcon prefixClass='icon' value='ziyuan' size='16' color='#7C7C7C'></AtIcon>
            <View>客服</View>
          </View>
          <View className='bf00'>
            <View className='detail-bottom-item' style={{ background: '#FF9500' }} onClick={this.handleAddCart}>
              <Text>加入购物车</Text>
            </View>
            <View className='detail-bottom-item' style={{ background: '#f00' }} onClick={this.handleBuyNow}>立即购买</View>
          </View>
        </View>
      </View>
    )
  }
}


export default Detail;